<template>
    <Category :title="menuData">
        <div class="title">截至北京时间 {{covDesc.modifyTime}}</div>
        <ul class="wrap">
            <li v-for="(item,index) in covDesc.homeData" :key="index">
                <span>较昨日<span class="bc">{{item.incr > 0 ? '+' + item.incr : item.incr}}</span></span>
                <div class="bold bc">{{item.count.toLocaleString()}}</div>
                <strong>{{item.name}}</strong>
            </li>
        </ul>
        <VueEcharts/>
    </Category>
</template>

<script>
    // import infoPoint from '../hooks/infoPoint'
    // import {onMounted,onUnmounted,onUpdated,watchEffect} from 'vue'
    import Category from './common/Category.vue'
    import VueEcharts from './common/VueEcharts.vue'

    export default {
        name: 'CovNumber',
        components: {
            Category,
            VueEcharts
        },
        props: {
            covDesc: {
                type: Object
            }
        },
        setup(props) {
            const menuData = '国内数据'
            // onUnmounted(()=>{
            //     // const time = props.covDesc.modifyTime
            //     const time = infoPoint().modifyTime
            //     console.log(time);
            // }) 
            // const time = props.covDesc.modifyTime
            // console.log(time);

            return {
                menuData
            }
        }
    }
</script>

<style lang="less" scoped>    
    .title {
        color: #666;
        margin-bottom: 0.2rem;
    }

    .wrap {
        display: flex;
        flex-wrap: wrap;
        padding: 0.1rem 0;
        box-shadow: 0 0.04rem 0.15rem 0.02rem rgb(0 0 0 / 7%);
        border-radius: 0.1rem;
        li {
            margin: 0.1rem 0;
            width: 33.33333%;
            text-align: center;
            color: #666;
            strong {
                color: #333;
            }
            .bold {
                font-weight: bold;
                font-size: 0.4rem;
            }
        }
        li:nth-child(1) .bc {
            color: rgb(247, 76, 49);
        }
        li:nth-child(2) .bc {
            color: rgb(247, 130, 7);
        }
        li:nth-child(3) .bc {
            color: rgb(162, 90, 78);
        }
        li:nth-child(4) .bc {
            color: rgb(174, 33, 44);
        }
        li:nth-child(5) .bc {
            color: rgb(93, 112, 146);
        }
        li:nth-child(6) .bc {
            color: rgb(40, 183, 163);
        }
    }
</style>